<template lang="pug">
.view.cp-manage-credential.fix-flex-pos
  el-tabs.mancredential-tabs(v-model="activeName", @tab-click="handleTab")
    el-tab-pane(v-for="(pane, index) in paneList", :label="pane.label", :name="pane.name", :key="index")
      template(slot="label")
        el-badge(:value="alert[alertKeys[index]]", :max="99", class="item", :hidden="alert[alertKeys[index]]==0")
          span(v-text="pane.label")
  .fix-flex-pos.man-main
    keep-alive
      router-view
</template>

<script>
import ManApi from '@/api/manage';

export default {
  name: 'mancredential',
  data() {
    return {
      activeName: '',
      paneList: [
        { label: '设备', name: 'device' },
        { label: '供应商', name: 'provider' },
        { label: '人员', name: 'personnel' },
        { label: '注册证', name: 'register' }
      ],
      alertKeys: ['deviceWarnNo', 'vendorWarnNo', 'employeeWarnNo', 'registionWarnNo'],
      alert: {}
    };
  },
  methods: {
    handleTab () {
      this.$router.push({ name: `mancredential${this.activeName}` });
    }
  },
  beforeRouteEnter (to, from, next) {
    const path = to.path;
    const activeName = path.split('/')[3];
    next((vm) => {
      vm.activeName = activeName;
    });
  },
  // 监听路由变化
  beforeRouteUpdate (to, from, next) {
    const path = to.path;
    this.activeName = path.split('/')[3];
    next();
  },
  created () {
    this.activeName = this.paneList[0].name;
    ManApi.getCredentialWarn().then((result) => {
      if (!result.status) {
        this.alert = result.obj;
      }
    });
  },
  mounted() {
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$TABHEIGHT: 42px
.cp-manage-credential
  overflow-x: hidden
  overflow-y: auto
  background: $THEMECOLOR
  .mancredential-tabs
    position: relative
    height: $TABHEIGHT
    background: white
    padding-left: 20px
    border-top: 2px solid #eee
    .el-tabs__item:focus.is-active.is-focus:not(:active)
      box-shadow: none
    .el-tabs__nav-wrap::after
      background-color: white
    .el-badge__content.is-fixed
      transform: translateY(0) translateX(100%)
      top: 4px
      right: 0
  .man-main
    top: $TABHEIGHT
</style>
